<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<svg xmlns="http://www.w3.org/2000/svg" width="800px" height="600px">
			<rect x="0" y="0" width="400" height="200" stroke="black" stroke-width="1" />
			<circle cx="0" cy="100" r="30" fill="blue" stroke="black" stroke-width="1">
				<animate attributeName="cx" from="0" to="100" dur="1s" repeatCount="indefinite" />
			</circle>
			<circle cx="0" cy="100" r="30" fill="red" stroke="black" stroke-width="1">
				<animate attributeName="cx" from="200" to="10" dur="1s" repeatCount="indefinite" />
			</circle>

			<g transform="translate(100,200)">
				<text id="TextElement" x="0" y="0" style="font-family:Verdana;font-size:24;color: cornflowerblue;"> It's SVG!
			      <animateMotion path="M 0 100 L 300 400" dur="2s" fill="freeze"repeatCount="indefinite" />
			    </text>
			</g>

			<g xmlns="http://www.w3.org/2000/svg" transform="translate(100,100)">
				<text id="TextElement" x="0" y="0" style="font-family:Verdana;font-size:24; visibility:hidden"> It's SVG!
				<set attributeName="visibility" attributeType="CSS" to="visible" begin="1s" dur="5s" fill="freeze"/>
				<animateMotion path="M 0 200 L 300 300" begin="1s" dur="1s" fill="freeze"/>
				<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-30" to="0" begin="1s" dur="1s" fill="freeze"/> 
				<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="3" additive="sum" begin="1s" dur="1s" fill="freeze"/> 
				</text>
			</g>
		</svg>
	</body>

</html>